let box = document.querySelector(".box");
let imgBoxUl = box.querySelector(".img_box > ul");
let dotBox = document.querySelector(".dot_box")
let timer;

// 初始化下标
let index = 1;
// 获取上一个操作的index
let lastIndex = 1;
// 移动到原来第一张图片的位置

let imgBox = document.querySelector(".box>.imgBox>ul");



//获取图片
let xhr = new XMLHttpRequest();
let data = {
    "type": "图片"
};



// let xhr = new XMLHttpRequest();
xhr.open("POST", "http://studentback.dfbuff.xyz/postMethod");
//设置请求头
//提交数据格式为json格式
xhr.setRequestHeader("Content-Type", "application/json");
//把json对象转换为json字符串
xhr.send(JSON.stringify(data));
xhr.addEventListener("readystatechange", function() {
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            // console.log(JSON.parse(xhr.responseText));
            let newArr = JSON.parse(xhr.responseText).result;
            newArr.forEach(function(item, idx) {
                //渲染图片
                imgBoxUl.innerHTML += `<li> <a href = "javascript:void(0)"> <img src = "${item.content}"></a></li>`;
                //渲染小圆点.
                dotBox.innerHTML += `<span class = "dot${idx == 0 ?'dotActive':''}"
                data - index = ${idx + 1 }> </span>`;
            });


            imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true));
            // 插入克隆的第四张图片到第一张之前的位置
            imgBoxUl.insertBefore(imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true), imgBoxUl.firstElementChild);
        }
    }
});



// 动态生成图片(第一张和最后一张)
// console.log(imgBoxUl.firstElementChild.cloneNode(true));
// console.log(imgBoxUl.lastElementChild.cloneNode(true));
// 插入克隆的第一张图片到最后一张图片之后的位置


imgBoxUl.style.transform = `translateX(-${index}00%)`;
setTimeout(function() {
    imgBoxUl.style.transition = "0.2s ease-in-out";
}, 300);
let flag = true; // 设置开关, 默认可以打开



// 事件代理
box.addEventListener("click", function(event) {
    // 左箭头
    (event.target.className == "arrow_left") && arrowLeftFn(event.target);
    // 右箭头
    (event.target.className == "arrow_right") && arrowRightFn(event.target);
    // 小圆点
    (event.target.classList.contains("dot")) && dotFn(event.target);
});

// 点击右箭头事件
function arrowRightFn(target) {
    if (flag) {

        flagFn();

        imgBoxUl.style.transform = `translateX(-${++index}00%)`;
        // 判断是否到达最后一张
        limit(imgBoxUl.children.length - 1, 1);
        // 获取具体span标签
        let rBtnEvent = target.parentElement.nextElementSibling.children[index - 1];
        dotColor(rBtnEvent);
    }
}

// 点击左箭头事件
function arrowLeftFn(target) {
    if (flag) {
        flagFn();
        imgBoxUl.style.transform = `translateX(-${--index}00%)`;
        // 判断是否是第一张
        limit(0, imgBoxUl.children.length - 2);
        // 获取具体span标签
        let lBtnEvent = target.parentElement.nextElementSibling.children[index - 1];
        dotColor(lBtnEvent);
    }
};

// 临界点跳转图片
function limit(limitIndex, setIndex) {
    // limitIndex 设置限制下标
    // setIndex   设置对于下标
    if (index == limitIndex) {
        index = setIndex;
        imgBoxUl.addEventListener("transitionend", function() {
            // 清除过渡效果, 并且ul恢复位置
            imgBoxUl.style.transition = "none";
            imgBoxUl.style.transform = `translateX(-${index}00%)`;

            // 恢复过渡效果
            // 获取最终样式(被计算的样式)
            window.getComputedStyle(imgBoxUl, "style").getPropertyValue("transition-duration");
            imgBoxUl.style.transition = "0.2s ease-in-out";
        })
    }
}

// 小圆点点击事件
function dotFn(target) {
    // 获取自定义属性的值，这个值可以和index对应
    let dataIndex = target.getAttribute("data-index");
    // 操作的值重新赋值到index，那么index就可以更新
    index = dataIndex;
    imgBoxUl.style.transform = `translateX(-${index}00%)`;
    // 调用小圆点颜色函数
    dotColor(target);
};

// 封装小圆点颜色变化函数
function dotColor(tag) {
    // console.log(tag);
    tag.parentElement.children[lastIndex - 1].classList.remove("dotActive");
    tag.classList.add("dotActive");
    // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
    lastIndex = index;
};

// 控制开关
function flagFn() {
    // 关闭开关
    flag = false;
    imgBoxUl.addEventListener("transitionend", function() {
        flag = true;
    });
}


// 自动轮播
timeFn();

function timeFn() {
    if (timer) {
        clearInterval(timer);
    }
    timer = setInterval(function() {
        arrowRightFn(imgBoxUl)
    }, 1000);
}

// 鼠标移入box区域，停止定时器
box.addEventListener("mouseenter", function() {
    clearInterval(timer);
});
// 鼠标移出box区域，开始定时器
box.addEventListener("mouseleave", function() {
    setTimeout(timeFn, 2000)
});

// 检测页面是否切换，切换就停止定时器
window.addEventListener("visibilitychange", function() {
    if (document.hidden) {
        clearInterval(timer);
    } else {
        timeFn();
    }
});